<template>
  <div class="app-main-container">
    <div class="steps_wrap">
      <el-steps :active="active">
        <el-step title="主体信息填写" />
        <el-step title="主体负责人信息填写" />
        <el-step title="小程序信息填写" />
        <el-step title="小程序负责人信息填写及人脸核身" />
      </el-steps>
    </div>

    <!--  -->
    <div v-if="active === 0" class="form_wrap">
      <div class="placeholder9 mb20">
        <div>提示：选择地区、详细地址，请填写实际通讯地址。</div>
        <div>
          上传有效证件原件的彩色扫描件或拍照件，请保持图片清晰完整、不遮挡关键信息/图像、边角齐全，证件有效期大于1个月。
        </div>
        <div>请对照证件信息如实选择、填写备案信息。</div>
      </div>
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="150px"
        label-suffix="："
      >
        <el-form-item label="选择地址" prop="proCode">
          <DhArea
            :app-id="appId"
            :province="param.proName"
            :city="param.cityName"
            :area="param.areaName"
            :province-code="param.proCode"
            :city-code="param.cityCode"
            :area-code="param.areaCode"
            @change="mainBodyAreaChange"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="param.address" placeholder="请输入详细地址" class="w400" />
        </el-form-item>
        <el-form-item label="主办者性质" prop="subjectType">
          <el-select v-model="param.subjectType" class="w400">
            <el-option
              v-for="op in OrganTypes"
              :key="op.type"
              :label="op.name"
              :value="op.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件类型" prop="certificateType">
          <el-select v-model="param.certificateType" filterable class="w400">
            <el-option
              v-for="op in RecordIDs"
              :key="op.type"
              :label="op.name"
              :value="op.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传营业执照" prop="certificatePhotoPath">
          <el-upload
            class="device-uploader"
            :action="uploadFileUrl"
            :data="uploadParam"
            :show-file-list="false"
            accept=".jpg,.png"
            :on-success="e => BusUploadSuccess(e, 'certificatePhotoPath')"
          >
            <i class="el-icon-plus uploader-icon" />
            <div
              v-show="param.certificatePhotoPath"
              class="file"
              :style="'background-image: url(' + param.certificatePhotoPath + ')'"
            >
              <div class="delete">
                <i
                  class="el-icon-delete icon"
                  @click.stop="deleteDeviceConfigAddImage('certificatePhotoPath')"
                />
              </div>
            </div>
          </el-upload>
          <div class="placeholder9">
            大小不超过200k，分辨率不低于1500*1100，必须为彩色，需在有效期内
          </div>
        </el-form-item>
        <el-form-item label="企业名称" prop="subjectName">
          <el-input v-model="param.subjectName" placeholder="请填写企业名称" class="w400" />
        </el-form-item>
        <el-form-item label="证件住所" prop="certificateAddress">
          <el-input v-model="param.certificateAddress" placeholder="请填写证件住所" class="w400" />
        </el-form-item>
        <el-form-item label="营业执照号" prop="certificateNumber">
          <el-input v-model="param.certificateNumber" placeholder="请填写营业执照号" class="w400" />
        </el-form-item>
      </el-form>
    </div>

    <div v-if="active === 1" class="form_wrap">
      <div class="placeholder9 mb20">
        提示：手机号码请填写主体负责人、应急联系人本人使用的有效手机号码，需保持电话畅通，不同人不能使用同一个号码。
      </div>
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="180px"
        label-suffix="："
      >

        <el-form-item label="主体负责人姓名" prop="principalInfoName">
          <el-input v-model="param.principalInfoName" placeholder="请填写主体负责人姓名" class="w200" />
        </el-form-item>
        <el-form-item label="证件类型" prop="principalInfoCertificateType">
          <el-select v-model="param.principalInfoCertificateType" filterable class="w400">
            <el-option
              v-for="op in RecordIDs"
              :key="op.type"
              :label="op.name"
              :value="op.type"
            />
          </el-select>
        </el-form-item>

        <div class="df_ac">
          <el-form-item label="上传身份证" prop="subjectFrontPath">
            <el-upload
              class="device-uploader2 mr20"
              :action="uploadFileUrl"
              :data="uploadParam"
              :show-file-list="false"
              accept=".jpg,.png"
              :on-success="e => BusUploadSuccess(e, 'subjectFrontPath')"
            >
              <div>
                <i class="el-icon-plus uploader-icon" />
                <div>上传身份证人像面</div>
              </div>
              <div
                v-show="param.subjectFrontPath"
                class="file"
                :style="'background-image: url(' + param.subjectFrontPath + ')'"
              >
                <div class="delete">
                  <i
                    class="el-icon-delete icon"
                    @click.stop="deleteDeviceConfigAddImage('subjectFrontPath')"
                  />
                </div>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label-width="0" prop="subjectBackPath">
            <el-upload
              class="device-uploader2 mr20"
              :action="uploadFileUrl"
              :data="uploadParam"
              :show-file-list="false"
              accept=".jpg,.png"
              :on-success="e => BusUploadSuccess(e, 'subjectBackPath')"
            >
              <div>
                <i class="el-icon-plus uploader-icon" />
                <div>上传身份证国徽面</div>
              </div>
              <div
                v-show="param.subjectBackPath"
                class="file"
                :style="'background-image: url(' + param.subjectBackPath + ')'"
              >
                <div class="delete">
                  <i
                    class="el-icon-delete icon"
                    @click.stop="deleteDeviceConfigAddImage('subjectBackPath')"
                  />
                </div>
              </div>
            </el-upload>
          </el-form-item>
        </div>
        <div class="placeholder9 mb20" style="margin-left: 150px;">
          大小不超过200k，分辨率不低于720*1280，必须为彩色，需在有效期内
        </div>
        <el-form-item label="主体负责人证件号码" prop="principalInfoCertificateNumber">
          <el-input v-model="param.principalInfoCertificateNumber" placeholder="请填写主体负责人证件号码" class="w400" />
        </el-form-item>
        <div class="df_ac">
          <el-form-item label="证件有效期" prop="certificateValidityDateStart">
            <el-date-picker
              v-model="param.certificateValidityDateStart"
              type="date"
              class="w200"
              format="yyyyMMdd"
              value-format="yyyyMMdd"
              placeholder="请选择开始日期"
            />
          </el-form-item>
          <span class="mb20 ml10 mr10"> ~ </span>
          <el-form-item label-width="0" prop="certificateValidityDateEnd">
            <el-input v-model="param.certificateValidityDateEnd" placeholder="结束时间(YYYYMMDD)或'长期'" style="width: 240px" />
            <!-- <el-date-picker
              v-model="param.certificateValidityDateEnd"
              type="date"
              class="w200"
              value-format="yyyyMMdd"
              placeholder="请选择结束日期"
            /> -->
          </el-form-item>
        </div>
        <el-form-item label="手机号" prop="principalInfoMobile">
          <el-input v-model="param.principalInfoMobile" placeholder="请填写手机号" class="w200" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-11]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" maxlength="11" />
          <!-- <el-button class="ml20" :disabled="downTime1 != 0" @click="sendCode('downTime1')">{{ downTime1 == 0 ? '获取验证码' : downTime1 }}</el-button> -->
        </el-form-item>
        <!-- <el-form-item label="验证码">
          <el-input v-model="tempParam.code1" placeholder="请填写验证码" class="w200" @blur="e=>VerifyCode(e, 'code1')" />
        </el-form-item> -->
        <el-form-item label="应急手机号" prop="principalInfoEmergencyContact">
          <el-input v-model="param.principalInfoEmergencyContact" placeholder="请填写应急手机号" class="w200" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-11]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" maxlength="11" />
        </el-form-item>
        <el-form-item label="邮箱地址" prop="principalInfoEmail">
          <el-input v-model="param.principalInfoEmail" placeholder="请填写邮箱地址" class="w400" />
        </el-form-item>
      </el-form>
    </div>

    <div v-if="active === 2" class="form_wrap">
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="220px"
        label-suffix="："
      >
        <el-form-item label="Appid">
          <el-input v-model="appId" disabled class="w200" />
        </el-form-item>
        <el-form-item label="小程序名称">
          <el-input v-model="appName" disabled class="w200" />
        </el-form-item>
        <el-form-item label="服务内容标识" prop="appletServiceContentTypes">
          <el-cascader
            v-model="param.appletServiceContentTypes"
            filterable
            :options="serviceContents"
            :props="{
              children: 'down',
              value: 'type',
              label: 'name'
            }"
            class="w400"
          />
          <!-- <el-select v-model="param.appletServiceContentTypes" filterable class="w400">
            <el-option
              v-for="op in serviceContents"
              :key="op.type"
              :label="op.name"
              :value="op.type"
            />
          </el-select> -->
        </el-form-item>
        <el-form-item label="互联网信息服务前置审批项" prop="appletNrlxDetails">
          <el-select v-model="param.appletNrlxDetails" filterable class="w400">
            <el-option
              v-for="op in miniApproverQuas"
              :key="op.type"
              :label="op.name"
              :value="op.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="param.appletNrlxDetails" label="文件">
          <el-upload
            class="device-uploader"
            :action="uploadFileUrl"
            :data="uploadParam"
            :show-file-list="false"
            accept=".jpg,.png"
            :on-success="e => BusUploadSuccess(e, 'examinePathList')"
          >
            <div>
              <i class="el-icon-plus uploader-icon" />
            </div>
            <div
              v-show="param.examinePathList"
              class="file"
              :style="'background-image: url(' + param.examinePathList + ')'"
            >
              <div class="delete">
                <i
                  class="el-icon-delete icon"
                  @click.stop="deleteDeviceConfigAddImage('examinePathList')"
                />
              </div>
            </div>
          </el-upload>
          <div class="placeholder9">
            请上传对应前置审批类目的许可证或相关资格证书，上传格式为jpg/png图片
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="appletComment">
          <el-input v-model="param.appletComment" type="textarea" :rows="5" placeholder="请填写小程序经营内容、服务内容(20-200字)" class="w400" />
        </el-form-item>
      </el-form>
    </div>

    <div v-if="active === 3" class="form_wrap">
      <div class="placeholder9 mb20">
        提示：填写方式默认复用主体负责人信息，若小程序管理员信息与主体负责人信息不一致时，填写方
        式需要选择手动填写小程序的管理员信息。
      </div>
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="170px"
        label-suffix="："
      >
        <el-form-item label="填写方式" prop="isusePrincipalInfo">
          <el-select v-model="param.isusePrincipalInfo">
            <el-option label="复用默认主体负责人信息" value="1" />
            <el-option label="手动填写" value="0" />
          </el-select>
        </el-form-item>
        <template v-if="param.isusePrincipalInfo == '0'">
          <el-form-item label="负责人姓名" prop="appletUserName">
            <el-input v-model="param.appletUserName" placeholder="请输入姓名" class="w200" />
          </el-form-item>
          <el-form-item label="负责人手机号" prop="appletUserMobile">
            <el-input v-model="param.appletUserMobile" placeholder="请输入手机号" class="w200" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-11]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" maxlength="11" />
            <!-- <el-button class="ml20" :disabled="downTime1 != 0" @click="sendCode('downTime2')">{{ downTime2 == 0 ? '获取验证码' : downTime2 }}</el-button> -->
          </el-form-item>
          <!-- <el-form-item label="验证码" prop="">
            <el-input v-model="tempParam.code2" placeholder="请输入验证码" class="w200" @blur="e=>VerifyCode(e, 'code2')" />
          </el-form-item> -->
          <el-form-item label="应急手机号" prop="appletUserEmergencyContact">
            <el-input v-model="param.appletUserEmergencyContact" placeholder="请输入手机号" class="w200" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-11]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" maxlength="11" />
          </el-form-item>
          <el-form-item label="邮箱地址" prop="appletUserEmail">
            <el-input v-model="param.appletUserEmail" placeholder="请输入邮箱地址" class="w400" />
          </el-form-item>
          <el-form-item label="证件类型" prop="appletUserCertificateType">
            <el-select v-model="param.appletUserCertificateType" filterable class="w400">
              <el-option
                v-for="op in RecordIDs"
                :key="op.type"
                :label="op.name"
                :value="op.type"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="证件号" prop="appletUserCertificateNumber">
            <el-input v-model="param.appletUserCertificateNumber" placeholder="请输入证件号" class="w200" />
          </el-form-item>
          <div class="df_ac">
            <el-form-item label="证件有效期" prop="appletUserDateStart">
              <el-date-picker
                v-model="param.appletUserDateStart"
                type="date"
                class="w200"
                format="yyyyMMdd"
                value-format="yyyyMMdd"
                placeholder="请选择开始日期"
              />
            </el-form-item>
            <span class="mb20 ml10 mr10"> ~ </span>
            <el-form-item label-width="0" prop="appletUserDateEnd">
              <el-input v-model="param.appletUserDateEnd" placeholder="结束时间(YYYYMMDD)或'长期'" style="width: 240px" />
              <!-- <el-date-picker
                v-model="param.appletUserDateEnd"
                type="date"
                class="w200"
                value-format="yyyyMMdd"
                placeholder="请选择结束日期"
              /> -->
            </el-form-item>
          </div>
          <div class="df_ac">
            <el-form-item label="上传身份证" prop="appletFrontPath">
              <el-upload
                class="device-uploader2 mr20"
                :action="uploadFileUrl"
                :data="uploadParam"
                :show-file-list="false"
                accept=".jpg,.png"
                :on-success="e => BusUploadSuccess(e, 'appletFrontPath')"
              >
                <div>
                  <i class="el-icon-plus uploader-icon" />
                  <div style="line-height: 14px;">上传身份证人像面</div>
                </div>
                <div
                  v-show="param.appletFrontPath"
                  class="file"
                  :style="'background-image: url(' + param.appletFrontPath + ')'"
                >
                  <div class="delete">
                    <i
                      class="el-icon-delete icon"
                      @click.stop="deleteDeviceConfigAddImage('appletFrontPath')"
                    />
                  </div>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label-width="0" prop="appletFrontPath">
              <el-upload
                class="device-uploader2 mr20"
                :action="uploadFileUrl"
                :data="uploadParam"
                :show-file-list="false"
                accept=".jpg,.png"
                :on-success="e => BusUploadSuccess(e, 'appletBackPath')"
              >
                <div>
                  <i class="el-icon-plus uploader-icon" />
                  <div style="line-height: 14px;">上传身份证国徽面</div>
                </div>
                <div
                  v-show="param.appletBackPath"
                  class="file"
                  :style="'background-image: url(' + param.appletBackPath + ')'"
                >
                  <div class="delete">
                    <i
                      class="el-icon-delete icon"
                      @click.stop="deleteDeviceConfigAddImage('appletBackPath')"
                    />
                  </div>
                </div>
              </el-upload>
            </el-form-item>
          </div>
          <div class="placeholder9 mb20" style="margin-left: 170px;">
            大小不超过200k，分辨率不低于720*1280，必须为彩色，需在有效期内
          </div>
          <el-form-item label="小程序负责人授权书" prop="appletAuthPath">
            <div class="df_ac">
              <el-upload
                class="device-uploader mr20"
                :action="uploadFileUrl"
                :data="uploadParam"
                :show-file-list="false"
                accept=".jpg,.png"
                :on-success="e => BusUploadSuccess(e, 'appletAuthPath')"
              >
                <div>
                  <i class="el-icon-plus uploader-icon" />
                </div>
                <div
                  v-show="param.appletAuthPath"
                  class="file"
                  :style="'background-image: url(' + param.appletAuthPath + ')'"
                >
                  <div class="delete">
                    <i
                      class="el-icon-delete icon"
                      @click.stop="deleteDeviceConfigAddImage('appletAuthPath')"
                    />
                  </div>
                </div>
              </el-upload>
              <el-button type="primary" @click="handleAuthDown">参考模版下载</el-button>
            </div>
          </el-form-item>
        </template>
      </el-form>
    </div>

    <div class="btns">
      <el-button @click="back">{{
        active === 0 ? "返回" : "上一步"
      }}</el-button>
      <el-button :loading="subLoading" type="primary" @click="next">{{ active === 3 ? '提交' : '下一步' }}</el-button>
    </div>
  </div>
</template>

<script>
import { rules } from './config'
import DhArea from './components/DhArea'
import {
  uploadFile,
  miniRecordUploadMedia,
  miniRecordServiceTypes,
  miniRecordQZApprType,
  miniRecordOrganType,
  miniRecordIDs,
  miniRecordSendCode,
  miniRecordVerifyCode,
  miniRecordSubPost,
  miniRecordTaskVerify,
  miniRecordAdminSave,
  miniRecordAdminDetail
} from '@/api'
export default {
  components: {
    DhArea
  },
  data() {
    return {
      active: 0,
      isHasIcpInfo: '0',
      param: {
        certificateType: 1,
        principalInfoCertificateType: 2
      },
      tempParam: {},
      rules,
      appId: '',
      id: '',
      appName: '',
      subLoading: false,

      OrganTypes: [], // 性质列表
      RecordIDs: [], // 证件类型列表,
      serviceContents: [], // 服务内容,
      miniApproverQuas: [], // 审批资质s,

      downTime1: 0,
      downTime2: 0,
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'APP_ICP_MEDIA_IMG'
      }
    }
  },
  created() {
    this.appId = this.$route.query.appId || ''
    this.appName = this.$route.query.appName || ''
    this.isHasIcpInfo = this.$route.query.isHasIcpInfo || ''
    this.id = this.$route.query.id || ''
    if (this.id) {
      miniRecordAdminDetail({ param: { id: this.id }}).then(res => {
        res.record.appletServiceContentTypes = res.record.appletServiceContentTypes * 1 || 0
        this.param = res.record
      })
    }

    this.getMiniRecordOrganType()
    this.getminiRecordIDs()
    this.getMiniRecordServiceTypes()
    this.getMiniRecordQZApprType()
  },
  methods: {
    next() {
      console.log('param', this.param)
      const { active, param } = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (active === 3) {
            this.subLoading = true
            param.appletUserIsLegalPerson = param.isusePrincipalInfo
            if (this.isHasIcpInfo === '1' || this.id) {
              miniRecordAdminSave({ param: { ...param, appId: this.appId }}).then(res => {
                this.subLoading = false
                if (res.errorCode !== '000000') return
                this.$message.success('提交成功')
                // miniRecordTaskVerify({ param: { appId: this.appId }})
                this.$router.replace({ name: 'RecordWeChat' })
              }, () => {
                this.subLoading = false
              })
            } else {
              miniRecordSubPost({ param: { ...param, appId: this.appId }}).then(res => {
                this.subLoading = false
                if (res.errorCode !== '000000') return
                this.$message.success('提交成功')
                miniRecordTaskVerify({ param: { appId: this.appId }})
                this.$router.replace({ name: 'RecordWeChat' })
              }, () => {
                this.subLoading = false
              })
            }
          } else {
            this.active = this.active + 1
          }
        }
      })
    },
    BusUploadSuccess(reso, str) {
      console.log('str', str)
      this.$set(this.param, str, reso.showUrl)
      const param = {
        appId: this.appId,
        type: '00',
        path: reso.showUrl,
        certificateType: 1
      }

      let message = ''
      if (str === 'certificatePhotoPath') {
        param.type = '00'
        param.certificateType = this.param.certificateType
        message = '上传营业执照成功'
      } else if (str === 'subjectFrontPath' || str === 'subjectBackPath') {
        param.type = str === 'subjectFrontPath' ? '01' : '02'
        param.certificateType = this.param.principalInfoCertificateType
        message = '上传证件照成功'
      } else if (str === 'examinePathList') {
        param.type = this.param.appletNrlxDetails
        param.certificateType = this.param.appletNrlxDetails
        message = '上传文件成功'
      } else if (str === 'appletFrontPath' || str === 'appletBackPath') {
        param.type = str === 'appletFrontPath' ? '03' : '04'
        param.certificateType = this.param.appletUserCertificateType
        message = '上传证件照成功'
      } else if (str === 'appletAuthPath') {
        param.type = '06'
        // param.certificateType = this.param.appletUserCertificateType
        message = '上传成功'
      }
      miniRecordUploadMedia({ param }).then(res => {
        if (res.errorCode !== '000000') return
        this.$message.success(message)
      })
    },
    deleteDeviceConfigAddImage(str) {
      this.$set(this.param, str, '')
    },
    mainBodyAreaChange(e) {
      console.log('e', e)
      this.$set(this.param, 'proCode', e[0].label)
      this.$set(this.param, 'proName', e[0].value)
      this.$set(this.param, 'cityCode', e[1].label)
      this.$set(this.param, 'cityName', e[1].value)
      this.$set(this.param, 'areaCode', e[2].label)
      this.$set(this.param, 'areaName', e[2].value)
    },
    sendCode(value) {
      miniRecordSendCode({ param: {
        phone: value === 'downTime1' ? this.param.principalInfoMobile : this.param.appletUserMobile,
        appId: this.appId,
        type: '05'
      }}).then(res => {
        if (res.errorCode !== '000000') return
        this.$message.success('验证码发送成功')
        this[value] = 60
        const timer = setInterval(() => {
          if (this[value] > 0) {
            this[value] = this[value] - 1
          } else {
            clearInterval(timer)
          }
        }, 1000)
      })
    },
    VerifyCode(e, val) {
      miniRecordVerifyCode({ param: {
        phone: val === 'code1' ? this.param.principalInfoMobile : this.param.appletUserMobile,
        appId: this.appId,
        code: this.tempParam[val]
      }}).then(res => {
        if (res.errorCode !== '000000') return
      }, () => {
        this.$set(this.param, val === 'code1' ? 'principalInfoMobile' : 'appletUserMobile', '')
        this.$set(this.tempParam, val, '')
      })
    },
    getMiniRecordOrganType() {
      miniRecordOrganType({ param: { appId: this.appId }}).then(res => {
        this.OrganTypes = res.recordList || []
      })
    },
    getminiRecordIDs() {
      miniRecordIDs({ param: { appId: this.appId }}).then(res => {
        this.RecordIDs = res.recordList || []
      })
    },
    getMiniRecordServiceTypes() {
      miniRecordServiceTypes({ param: { appId: this.appId }}).then(res => {
        this.serviceContents = res.recordList.map(item => {
          item.type = item.type + ''
          return item
        })
      })
    },
    getMiniRecordQZApprType() {
      miniRecordQZApprType({ param: { appId: this.appId }}).then(res => {
        this.miniApproverQuas = res.recordList.map(item => {
          item.type = item.type + ''
          return item
        })
      })
    },
    handleAuthDown() {
      window.open('XXXXXXXXX', '_blank')
    },
    back() {
      if (this.active === 0) {
        this.$router.replace({ name: 'RecordWeChat' })
      } else {
        this.active = this.active - 1
      }
    }

  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.form_wrap {
  width: 1000px;
  margin: 0 auto;
}
.placeholder9 {
  font-size: 12px;
}
.steps_wrap {
  width: 1000px;
  margin: 20px auto;
}
.btns {
  text-align: center;
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.device-uploader2 {
  width: 160px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
</style>
